<template>
    <div>
        <mt-header class="plain">
            <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
        </mt-header>
        <div class="info-container">
            <div class="my-base-info">
                <div class="info-avatar">
                    <img :src="userInfo.avatarUrl ? userInfo.avatarUrl : img.myDatum">
                </div>
                <div class="my-info-name ">
                    <div class="my-info-user-name">{{userInfo.realName}}</div>
                    <div class="my-info-user-school">{{mySchool.name || '暂无'}}</div>
                </div>
            </div>
            <div class="punch-card-info">
                <div class="punch-card-desc">
                    <div class="punch-card-type">
                        {{info.data.description}}
                    </div>
                    <div class="punch-card-time">
                        {{info.time}}
                    </div>
                </div>
                <div class="punch-card-button">
                    <div class="button-content">
                        <img :src="img.myBack" alt="" @click="doSignIn">
                        <div class="button-content-info"  @click="doSignIn">
                            <div class="punch-card-type">
                                {{info.type}}打卡
                            </div>
                            <div class="punch-card-time">
                                {{info.now}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-footer">
            <div class="x-row">
                <div class="x-col-6">
                    <div class="oper" @click="doSignIn">
                        <div class="img pt-1">
                            <img :src="isSignedIn ? img.signIn2 : img.signIn" alt="打卡">
                        </div>
                        <div :class="{'text': true, 'color-default': isSignedIn}">
                            打卡
                        </div>
                    </div>
                </div>
                <div class="x-col-6">
                    <div class="oper" @click="showHistory">
                        <div class="img pt-1">
                            <img :src="img.history2" alt="历史">
                        </div>
                        <div :class="{'text': true, 'color-default': true}">
                            历史
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import myBackImg from '@/assets/images/personal/打卡背景.png'
import myDatumImg from '@/assets/images/personal/个人中心_完善资料_头像.png'

import signInImg from '@/assets/images/personal/考勤_打卡.png'
import signInImg2 from '@/assets/images/personal/考勤_打卡_选中.png'

import historyImg from '@/assets/images/personal/考勤_历史.png'
import historyImg2 from '@/assets/images/personal/考勤_历史_选中.png'

import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import userApi from '@/api/user'
import schoolApi from '@/api/school'
import utils from '@/utils'

// import vConsole from 'vconsole'

export default {
    data() {
        return {
            img: {
                myDatum: myDatumImg,
                myBack: myBackImg,
                signIn: signInImg,
                signIn2: signInImg2,
                history: historyImg,
                history2: historyImg2
            },
            mySchool: {},
            userInfo: {},
            info: {
                type: '',
                time: '',
                data: {},
                now: ''
            },

            signTouched: false,
            historyTouched: false,
            isSignedIn: false,
            position: {},
            map: new AMap.Map('')
        }
    },

    created() {
        this.mySchool = utils.get('USER_SCHOOL') || {}
        this.userInfo = utils.get('USER_INFO') || {}
        this.getSignInfo()
        this.start()
        // new vConsole();
    },

    methods: {
        goBack() {
            this.$router.replace('/personal')
        },

        getSignInfo() {
            schoolApi.getSignInfo().then(resp => {
                let format = 'HH:mm'
                let now = this.$moment().format(format)
                let result = resp.result || []
                let current, i

                for (i = 0; i < result.length; i++) {
                    let start = this.$moment(result[i].begintime).format(format)
                    let end = this.$moment(result[i].endtime).format(format)

                    if (now < end) {
                        current = result[i]
                        break;
                    }
                }

                if (!current) {
                    current = {}
                }

                this.info.data = current
                // console.log(i, result.length)
                // this.info.type = i == 0 ? '上课' : (i == result.length - 1 ? '下课' : (i >= result.length ? '' : '课间'))
                if (i == 0) {
                    this.info.type = '上课'
                } else if (i == result.length - 1) {
                    this.info.type = '下课'
                } else if (i >= result.length) {
                    this.info.type = ''
                } else {
                    this.info.type = '课间'
                }
                this.info.time = this.$moment(current.begintime).format(format) + ' - ' + this.$moment(current.endtime).format(format)
                this.isSignedIn = (current.status == 'SIGNEDIN')
            })
        },

        start() {
            this.info.now = this.$moment(new Date()).format('HH:mm:ss')
            setInterval(() => {
                this.info.now = this.$moment(new Date()).format('HH:mm:ss')
            }, 1000)
        },

        getPosition(callback) {
            // if (navigator.geolocation) {
            //     navigator.geolocation.getCurrentPosition((position) => {
            //         // latitude = position.coords.latitude; //获取纬度
            //         // longitude = position.coords.longitude; //获取经度
            //         this.position = position.coords
            //         callback && callback(position.coords)
            //     })
            // } else {
            //     Toast("不支持定位功能");
            // }

            
            this.map.plugin('AMap.Geolocation', () => {
                let geolocation = new AMap.Geolocation({
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                })

                geolocation.getCurrentPosition()
                AMap.event.addListener(geolocation, 'complete', (data) => {
                    callback && callback(data.position)
                })
                AMap.event.addListener(geolocation, 'error', (data) => {
                    Toast('定位失败了')
                    console && console.log(data)
                })
            })
        },


        doSignIn() {
            
            let now = this.info.now
            let start = this.$moment(this.info.data.begintime).format('HH:mm:ss')
            let end = this.$moment(this.info.data.endtime).format('HH:mm:ss')
            
            if (!this.info.data.begintime || !this.info.data.endtime || !start || !end) {
                Toast('还没到打卡时间')
                return
            }

            if (now < start || now > end) {
                Toast('还没到打卡时间')
                return
            }

            if (this.isSignedIn) {
                Toast('您已经签到过一次了')
                return
            }

            this.getPosition((position) => {
                // console.log(position)
                schoolApi.signIn({
                    params: {
                        horizontal: position.longitude || position.lng,
                        vertical: position.latitude || position.lat
                    }
                }).then(resp => {
                    let result = resp || {}
                    if (result.result) {
                        Toast(result.message || '签到成功')
                        this.isSignedIn = true
                    } else {
                        Toast(result.message || '签到失败')
                        this.isSignedIn = this.isSignedIn || false
                    }
                    
                }).catch(resp => {
                    if (resp.statusCode == '200') {
                        Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
                    }
                })
            })
            
            
        },

        showHistory() {
            this.$router.push('/personal/school/punchhistory')
        }
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$offset-y: 16px;
$scale: 1.2;

.info-container {
    
    margin: 0 $offset-x;
    // margin-bottom: 70px;
    
    .my-base-info {
        $base-height: 50px;
        height: $base-height;
        margin-top: 16px;
        margin-bottom: 18px;
        .info-avatar {
            width: $base-height;
            height: $base-height;
            overflow: hidden;
            float: left;
            border-radius: 50%;
            img {
                width: 100%;
                height: 100%;
                
            }
        }

        .my-info-name {
            float: left;
            line-height: $base-height/2;
            margin-left: $offset-x;
            font-size: 16px * $scale;
            text-align: left;
            .my-info-user-name {
                color: #000000;
                font-size: 16px * $scale;
            }
            .my-info-user-school {
                color: #666666;
                font-size: 12px * $scale;
            }
        }

        .my-info-setting {
            line-height: $base-height;
            font-size: 14px * $scale;
        }
    }

    .punch-card-info {
        border-top: 1px solid #cccccc;
        padding-top: 18px;
        .punch-card-desc {
            padding: 14px 0 56px 0;
            color: #666666;
            .punch-card-type {
                font-size: 14px * $scale;
            }

            .punch-card-time {
                margin-top: 12px;
                font-size: 12px * $scale;
            }
        }

        .punch-card-button {
            $width: 140px;
            width: 100%;
            height: $width;
            text-align: center;
            img {
                width: $width;
                height: $width;
            }

            .button-content {
                display: inline-block;
                position: relative;

                .button-content-info {
                    position: relative;
                    top: -100px;
                    left: -8px;
                    color: #ffffff;
                    .punch-card-type {
                        font-size: 16px * $scale;
                    }

                    .punch-card-time {
                        margin-top: 5px;
                        font-size: 12px * $scale;
                    }
                }
            }
        }
    }
    
}
.info-footer {
    border-top: 1px solid #cccccc;
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;
    padding-top: 5px;
    .img img {
        width: 20px;
    }

    .oper {
        width: 26px;
        display: inline-block;
    }
}
</style>
